<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP Study API 测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            display: flex;
            gap: 20px;
        }
        .section {
            flex: 1;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        input, textarea {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #getData {
            margin-bottom: 10px;
        }
        #result {
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1>HTTP Study API 测试</h1>
    <div class="container">
        <div class="section">
            <h2>添加新内容</h2>
            <form id="postForm">
                <input type="text" id="title" placeholder="标题" required>
                <textarea id="content" placeholder="内容" rows="4" required></textarea>
                <button type="submit">提交</button>
            </form>
        </div>
        <div class="section">
            <h2>获取所有内容</h2>
            <button id="getData">刷新数据</button>
            <div id="result"></div>
        </div>
    </div>

    <script>
        const API_URL = 'http://localhost:3000/api/harmonyOS/Meituan/categoryFood';

        // 获取数据
        async function fetchData() {
            try {
                const response = await fetch(API_URL);
                const data = await response.json();
                document.getElementById('result').textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                console.error('获取数据失败:', error);
                document.getElementById('result').textContent = '获取数据失败: ' + error.message;
            }
        }

        // 提交数据
        document.getElementById('postForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const title = document.getElementById('title').value;
            const content = document.getElementById('content').value;

            try {
                const response = await fetch(API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ title, content })
                });

                if (response.ok) {
                    alert('添加成功！');
                    document.getElementById('title').value = '';
                    document.getElementById('content').value = '';
                    fetchData(); // 刷新数据
                } else {
                    throw new Error('提交失败');
                }
            } catch (error) {
                console.error('提交数据失败:', error);
                alert('提交失败: ' + error.message);
            }
        });

        // 绑定获取数据按钮事件
        document.getElementById('getData').addEventListener('click', fetchData);

        // 页面加载时获取数据
        fetchData();
    </script>
</body>
</html>